<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<text class="title">{{ isEditMode ? '编辑客户' : '新增客户' }}</text>
		</view>

		<!-- 表单内容 -->
		<view class="form-body">
			<!-- 客户编号 -->
			<view class="form-row">
				<text class="form-label">客户编号</text>
				<input type="text" v-model="currentForm.clientNumber" class="form-input" placeholder="请输入客户编号" />
			</view>

			<!-- 客户名称 -->
			<view class="form-row">
				<text class="form-label">客户名称</text>
				<input type="text" v-model="currentForm.clientName" class="form-input" placeholder="请输入客户名称" />
			</view>

			<!-- 联系地址 -->
			<view class="form-row">
				<text class="form-label">联系地址</text>
				<input type="text" v-model="currentForm.contactAddress" class="form-input" placeholder="请输入联系地址" />
			</view>

			<!-- 联系人 -->
			<view class="form-row">
				<text class="form-label">联系人</text>
				<input type="text" v-model="currentForm.contactPerson" class="form-input" placeholder="请输入联系人" />
			</view>

			<!-- 手机号 -->
			<view class="form-row">
				<text class="form-label">手机号</text>
				<input type="text" v-model="currentForm.phoneNumber" class="form-input" placeholder="请输入手机号" />
			</view>

			<!-- 客户经理 -->
			<view class="form-row">
				<text class="form-label">客户经理</text>
				<input type="text" v-model="currentForm.clientManager" class="form-input" placeholder="请输入客户经理" />
			</view>

			<!-- 跟进状态 -->
			<view class="form-row">
				<text class="form-label">跟进状态</text>
				<input type="text" v-model="currentForm.followStatus" class="form-input" placeholder="请输入跟进状态" />
			</view>

			<!-- 所属行业 -->
			<view class="form-row">
				<text class="form-label">所属行业</text>
				<input type="text" v-model="currentForm.industry" class="form-input" placeholder="请输入所属行业" />
			</view>

			<!-- 客户属性 -->
			<view class="form-row">
				<text class="form-label">客户属性</text>
				<input type="text" v-model="currentForm.clientProperty" class="form-input" placeholder="请输入客户属性" />
			</view>

			<!-- 最后沟通时间 -->
			<view class="form-row">
				<text class="form-label">最后沟通时间</text>
				<picker mode="date" v-model="currentForm.lastCommunicationDate" class="form-input">
					<view>{{ currentForm.lastCommunicationDate || '请选择日期' }}</view>
				</picker>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer">
			<button class="btn btn-cancel" @click="cancel">取消</button>
			<button class="btn btn-confirm" @click="submitFormData">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		add,
		list,
		update
	} from "@/api/returndollar";
	export default {
		data() {
			return {
				isEditMode: false, // 判断是否编辑模式  
				currentForm: {
					clientNumber: '',
					clientName: '',
					contactAddress: '',
					contactPerson: '',
					phoneNumber: '',
					clientManager: '',
					followStatus: '',
					industry: '',
					clientProperty: '',
					lastCommunicationDate: ''
				}
			};
		},
		onLoad(options) {
			// 从跳转路径的参数中获取传递的数据  
			this.isEditMode = options.isEdit === 'true';
			console.log('参数：')
			console.log(options)

			if (options.clientData) {
				const parsedData = JSON.parse(decodeURIComponent(options.clientData));
				this.currentForm = parsedData;
			}
		},
		methods: {
			
			cancel() {
				// 返回上一页  
				uni.navigateBack();
			},
			submitFormData() {
				console.log('提交的数据:', this.currentForm);
				if (!this.isEditMode) {
					add(this.currentForm).then(response => {
						if (response.msg === '操作成功') {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						}
					});
				} else {
					update(this.currentForm).then(response => {
		 			if (response.msg === '操作成功') {
							uni.showToast({
								title: '编辑成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						}
					});
				}

			}
		}
	};
</script>
<style scoped>
	/* 容器和整体样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f9f9f9;
		/* 淡灰背景 */
	}

	/* 标题部分 */
	.header {
		padding: 20rpx;
		background-color: #007aff;
		/* 微信小程序蓝色主题 */
		color: white;
		text-align: center;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 表单区域 */
	.form-body {
		flex: 1;
		padding: 20rpx;
		margin-top: 10rpx;
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
	}

	.form-row {
		margin-bottom: 50rpx;
	}

	.form-label {
		font-size: 50rpx;
		margin-bottom: 5rpx;
		color: #333;
		font-weight: 800;
	}

	.form-input {
		width: 100%;
		padding: 0rpx;
		font-size: 35rpx;
		border: 1rpx solid #dcdcdc;
		border-radius: 8rpx;
		background-color: #fafafa;
		color: #333;
	}

	.form-input:focus {
		border-color: #007aff;
		/* 高亮效果 */
		outline: none;
	}

	/* 底部操作按钮 */
	.footer {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: white;
		border-top: 2rpx solid #e0e0e0;
	}

	.btn {
		flex: 1;
		margin: 5rpx;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.btn-cancel {
		background-color: #f56c6c;
		/* 红色取消按钮 */
		color: white;
	}

	.btn-cancel:hover {
		background-color: #ec4c4c;
	}

	.btn-confirm {
		background-color: #67c23a;
		/* 绿色确认按钮 */
		color: white;
	}

	.btn-confirm:hover {
		background-color: #56a324;
	}
</style>
